.container {
  position: relative;
  .image-slider {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    // .list {
    //   display: flex;
    //   transition: all 1s;
    //   img {
    //     width: 100%;
    //   }
    // }
    img {
      width: 100%;
      height: 50%;
      flex-shrink: 0;
      scroll-snap-align: start;
    }

  }
  .mask {
    width: 100%;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    background-color: black;
    opacity: .5;
    color: #fff;
    .slider-spot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      margin: 0 5px;
    }
  }
}
